import { ref } from 'vue'

// 是否注册事件
let listenerRegistered = false

/**
 * 检查当前屏幕宽度是否小于指定的断点
 * @param {number} breakpoint - 断点宽度（像素）
 */
export const useIsMobile = (breakpoint = 768) => {
  const isMobile = ref(window.innerWidth < breakpoint)

  const checkIsMobile = () => {
    isMobile.value = window.innerWidth < breakpoint
  }

  // 只注册一次 resize 事件监听器
  if (!listenerRegistered) {
    window.addEventListener('resize', checkIsMobile)
    listenerRegistered = true
  }

  return isMobile
}
